/**
 * Create by Wanglei
 * Update by wuchenyu 
 * Update by TianJing
 */
(function($) {
    /**
     * 基于H+,jQuery的简单时间轴插件，依赖lodash和moment
     * @param {Object[]} data 时间轴显示数据
     * @param {String} [data[].icon=phone] 基于font-awesome的icon名，不带fa
     * @param {String} [data[].title] 标题 
     * @param {String} data[].content 内容文本
     * @param {(Date|string)} data[].date 时间对象或者正确的时间字符串
     * @param {String} [data[].addInfo] 额外信息
     * @param {String} [data[].handleName] 权限信息
     */
    $.fn.timeline = function(data) {
        var that = this;
        if (_.isEmpty(data)) return;
        //如果参数只有一个对象，则装载为数组
        if (_.isObject(data) && !_.isArray(data)) {
            data = [data];
        }
        if (data.length === 0) return;
        //增加容器class
        if (!that.hasClass("vertical-timeline")) {
            that.addClass("vertical-timeline");
        }
        //默认使用light主题
        that.addClass("light-timeline");
        var timelineFragment = [];
        data.forEach(function(obj) {
            var icon = obj.icon || "phone";
            timelineFragment.push("<div class='vertical-timeline-block'>");

            timelineFragment.push("<div class='vertical-timeline-icon navy-bg'>");
            timelineFragment.push("<i class='fa fa-" + icon + "'></i>");
            timelineFragment.push("</div>");

            timelineFragment.push("<div class='vertical-timeline-content'>");
            if (!!obj.title) {
                timelineFragment.push("<h2>" + obj.title + "</h2>");
            }

            timelineFragment.push("<p>");

            timelineFragment.push(obj.content);

            if (!!obj.handleName) {
                timelineFragment.push("<span style='float:right'>");
                timelineFragment.push(obj.handleName);
                timelineFragment.push("</span>");
            }

            timelineFragment.push("</p>");

            if (obj.addInfo) {
                timelineFragment.push("<span class='add-info'>" + obj.addInfo + "</span>");
            }

            var createTime = moment(obj.date);

            timelineFragment.push("<span class='vertical-date'>" + createTime.format("YYYY/MM/DD") + "<br><small>" + createTime.format("HH:mm") + "</small>" + "</span>");

            timelineFragment.push("</div>");

            // var $block = $("<div>").addClass("vertical-timeline-block");
            // $block.append($("<div>").addClass("vertical-timeline-icon navy-bg").append("<i class='fa fa-" + icon + "'></i>"));
            // var $content = $("<div>").addClass("vertical-timeline-content");
            // obj.title && $content.append($("<h2>").text(obj.title));
            // $content.append($("<p>").text(obj.content));
            // if (obj.addInfo) {
            //     $content.append($("<span>").addClass("add-info").text(obj.addInfo));
            // }
            // var createTime = moment(obj.date);
            // $content.append(
            //     $("<span>").addClass("vertical-date")
            //     .html(createTime.format("YYYY/MM/DD") + "<br><small>" + createTime.format("HH:mm") + "</small>"));
            // $block.append($content);
            // that.append($block);

            timelineFragment.push("</div>");
        });
        that.html(timelineFragment.join(""));
    }
})(jQuery);
